<template>
  <el-collapse-item class="edit-title" title="尺寸和位置" name="position">
    <el-form>
      <div style="display: flex; margin-top:10px">
        <input-normal label="大小" v-model="conAttr.width" unit="宽" @change="onChangeWH"></input-normal>
        <input-normal label="" v-model="conAttr.height" unit="高" @change="onChangeWH"></input-normal>
      </div>
      <div style="display: flex;">
        <input-normal label="位置" v-model="conAttr.left" unit="X" @change="onChangePosition"></input-normal>
        <input-normal label="" v-model="conAttr.top" unit="Y" @change="onChangePosition"></input-normal>
      </div>
      <input-normal label="前后层次" v-model="conAttr.zIndex" @change="onChangeComponentZIndex"></input-normal>
    </el-form>
  </el-collapse-item>
</template>
<script>
import InputNormal from '@/views/components/edit/InputNormal.vue'
import { mapState, mapActions } from 'vuex'

export default {
  name: "RightPosition",
  components: {
    InputNormal,
  },
  computed: {
    ...mapState({
      conAttr: (state) => _.cloneDeep(state.components.currentComponentData.conAttr),
    }),
  },
  methods: {
    ...mapActions({
      changeWH: "components/changeWH",
      recordMousePosition: "components/recordMousePosition",
      setDragComponentZIndex: "setDragComponentZIndex",
      adjustComponentZIndex: "components/adjustComponentZIndex",
    }),
    onChangeWH() {
      let wid = parseInt(this.conAttr.width)
      let hei = parseInt(this.conAttr.height)
      this.changeWH({ width: wid ? wid : 10, height: hei ? hei : 10});
    },
    onChangePosition() {
      let left = parseInt(this.conAttr.left)
      let top = parseInt(this.conAttr.top)
      this.recordMousePosition({ left: left ? left : 0, top: top ? top : 0 });
    },
    onChangeComponentZIndex(){
      if(this.conAttr) {
        let zIndex = this.conAttr.zIndex
        if(!zIndex || zIndex < 0) {
          zIndex = 0
        }
        if(zIndex > 50){
          zIndex = 50
        }
        this.adjustComponentZIndex(zIndex);
      }
    }
  }
};
</script>


